import _ from 'lodash';
// 直接引入style.css文件，webpack载入器会将此文件转译到dist目录。
// js脚本可以通过element.classList.add('样式选择器名')将类添加到元素。
import './style.css';
// 使用文件载入器引入图片，使用imageObj = new Image(); imageObj.src = image01 (引入文件后映射的别名) 来使用引入的图片。
// 同样，在样式文件或其它文件中，可以直接使用该图片原始名称,而不需要在此引入。
// 字体文件不需要在此引入，而是在css样式文件中直接使用@font-face方式引入。
import image01 from './image01.jpg';
import dataXml from './data.xml';
function component() {
    let element = document.createElement('div');

    /*_表示全局变量. index.js没有显式的声明对lodash的依赖，在这里假设全局变量"_"存在。
    如果在index.html并没有通过<script>标签引入lodash，本脚本也没有显式声明，则报错：uncaught ReferenceError: _ is not defined。

    如果在index.html中引入组件，而不是在index.js中引入组件的缺陷是：
    1、不能直观显示脚本的依赖库；
    2、如果依赖库引入的顺序不对，或依赖库缺失，将会导致运行不正常；
    3、如果依赖库引入，但没有被使用，浏览器将会载入不必要的代码；
    所以，正确的做法是：
    1、npm install --save 依赖包名
    2、脚本文件中通import直接引入依赖包。
    3、通过这种方式引入的脚本，必须通过[npx webpack]命令编译后才能使用。因为浏览器并不能识别import等ES6语法。webpack是一个可被npm执行的脚本命令
    4、编译的默认文件名是main.js。编译文件存放的目录固定为dist/
    5、这里所说的编译是指transpile(编译后语言抽象层次仍然相同) 而不是compile（编译成不同抽象层次的语言）
    6、webpack不但能转换ES6模块语法（像import export）,也支持其它很多模块语法，像AMD，CommonJS等等。
    7、除import、export等导入导出语句外，webpack不会改变其它语句语法词，如果使用了其它如ES2015的语法词，请使用类似Babel或其它转译器。
    */
    element.innerHTML = _.join(['Hello','webPack'],' ');
    element.classList.add('hello');
    let imageObj = new Image();
    imageObj.src = image01;
    element.appendChild(imageObj);
    console.log(dataXml.note.from);

    return element;
}

document.body.appendChild(component());